@import '../util';
.tabMenu{
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 48px;
  background-color: #fff;
  border-top: 1px solid $border;
 
  &__btn{
    flex: 1;
    text-decoration: none;

    @include flex-v-center;
  }
 
  &__icon{
    display: block;
    width: 22px;
    height: 22px;
    background-color: #777;

    &--movie{
      background: #fff url("../icons/movie.png") 50% / contain no-repeat;
    }
    &--user{
      background: #fff url("../icons/user.png") 50% / contain no-repeat;
    }
  }

  &__btn--active{
    .tabMenu__text{
      color: #ff4c64;
    }

    .tabMenu__icon{
      &--movie{
        background: #fff url("../icons/movie-solid.png") 50% / contain no-repeat;
      }
      &--user{
        background: #fff url("../icons/user-solid.png") 50% / contain no-repeat;
      }
    }
  }

  &__text{
    color: #666;
    font-size: 10px;
    margin-top: 4px;
  }
}